<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>推拉门效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #f1f2f6;
    }

    img {
      display: block;
    }

    .container {
      width: 800px;
      margin: 100px auto;
      position: relative;
    }

    .container_before {
      position: absolute;
      top: 0;
      left: 0;
    }

    .container_before_img {
      width: 500px;
      height: 240px;
      overflow: hidden;
    }

    .container_before_img>img {
      width: 800px;
      height: 240px;
    }

    .contanier_before_btn {
      width: 5px;
      height: 100%;
      background-color: #545763;
      position: absolute;
      top: 0;
      right: 0;
      cursor: e-resize;
    }

    .contanier_before_btn>img {
      width: 18px;
      height: 62px;
      position: absolute;
      top: 50%;
      left: -9px;
      margin-top: -30px;
    }

    .container_after {
      width: 800px;
      background-color: #f1f2f6;
    }

    .container_after>img {
      width: 100%;
      height: 240px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="container_before">
      <div class="container_before_img" ondragstart="return false;">
        <img src="http://pic.qiantucdn.com/images/slideshow/58d922074d3d5.jpg">
      </div>
      <div class="contanier_before_btn" ondragstart="return false;">
        <img src="">
      </div>
    </div>
    <div class="container_after" ondragstart="return false;">
      <img src="http://pic.qiantucdn.com/images/slideshow/58e44e7307494.png">
    </div>
  </div>
</body>
<script>
  var box = document.querySelector('.container_before_img');
  var btn = document.querySelector('.contanier_before_btn');
  var open = false;
  btn.onmousedown = function (e) {
    e = e || window.event;
    var x = btn.offsetLeft;
    open = true;
    var mouse_x = event.pageX;
    document.onmousemove = function (event) {
      event = event || window.event;
      if (open) {
        var move_x = event.pageX;
        var move_distance = x + (move_x - mouse_x);
        if (move_distance >= -1 && move_distance <= 800) {
          box.style.width = `${move_distance}px`;
          btn.style.left = `${move_distance}px`;
        }
      }
    }
  }

  btn.onmouseup = function(){
    open = false;
  }
</script>

</html>